<template>
  <div>
    <div>
      <!-- 页头 -->
      <div class="back">
        <i class="el-icon-back" @click="$router.go(-1)"></i>
        <span style="padding: 10px; color: rgba(0, 0, 0, 0.15)">|</span>
        <span style="font-size: 20px; font-weight: 500; color: #2f343e"
          >编辑</span
        >
      </div>
      <!-- 主题 -->
      <div class="content-box">
        <!-- 头部部分 -->
        <div class="box-title">
          <i class="el-icon-warning" style="color: #4b6eef"></i>
          <div
            style="
              margin-left: 10px;
              font-size: 14px;
              color: rgba(0, 0, 0, 0.65);
              line-height: 22px;
            "
          >
            <div>
              1、运行管理风险评估模型,基于监管事件发生情况对网络整体的运行管理风险进行评估，风险值越高，对单位的整体影响越严重;
            </div>
            <div>
              2、满分为100分,按照配置各评分项权重进行累计,最终得分换算成为响应的风险等级;
            </div>
            <div>
              3、评估项占比总和100%,评估权重占比越高,说明评估项越重要,影响风险等级越高;
            </div>
            <div>4、单个治理能力类型份数=各评估要素的加权平均值</div>
            <div>5、风险治理能力总分数=治理能力评估项的加权平均值</div>
          </div>
        </div>
        <!-- 内容部分 -->
        <!-- 处置时效评分权重(%) -->
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <i class="el-icon-arrow-right" style="float: left"></i>
              <span style="float: left">处置时效评分权重(%)</span>
              <el-input-number
                v-model="num13"
                style="margin: 0 10px 0 0; width: 88px; margin-left: 130px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
                @change="handleChange"
              />
            </template>
            <!-- 内容整体一行 -->
            <div class="content-row">
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 40px;
                "
                >成因不准确:</span
              >
              <el-input-number
                v-model="num8"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 60px;
                "
                >超过阈值:</span
              >
              <el-input-number
                v-model="num9"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <el-button type="text" style="margin-left: 16px;margin-top:8px">增加</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
           <!-- 成因准确性评分权重(%) -->
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <i class="el-icon-arrow-right" style="float: left"></i>
              <span style="float: left">成因准确性评分权重(%)</span>
              <el-input-number
                v-model="num13"
                style="margin: 0 10px 0 0; width: 88px; margin-left: 115px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
                @change="handleChange"
              />
            </template>
            <!-- 内容整体一行 -->
            <div class="content-row">
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 40px;
                "
                >处置不及时:</span
              >
              <el-input-number
                v-model="num8"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 60px;
                "
                >超过阈值:</span
              >
              <el-input-number
                v-model="num8"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <el-button type="text" style="margin-left: 16px;margin-top:8px">增加</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
            <!-- 核实信息完备性评分权重(%) -->
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
              <i class="el-icon-arrow-right" style="float: left"></i>
              <span style="float: left">核实信息完备性评分权重(%)</span>
              <el-input-number
                v-model="num13"
                style="margin: 0 10px 0 0; width: 88px; margin-left: 85px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
                @change="handleChange"
              />
            </template>
            <!-- 内容整体一行 -->
            <div class="content-row">
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 40px;
                "
                >核实信息不完备:</span
              >
              <el-input-number
                v-model="num8"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 60px;
                "
                >超过阈值:</span
              >
              <el-input-number
                v-model="num8"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <el-button type="text" style="margin-left: 16px;margin-top:8px">增加</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
             <!-- 整体措施得当性评分权重(%) -->
        <el-collapse v-model="activeNames">
          <el-collapse-item name="1">
            <template slot="title">
            
               <i class="el-icon-arrow-right" style="float: right"></i>
              <span style="float: left">整体措施得当性评分权重(%)</span>
              <el-input-number
                v-model="num13"
                style="margin: 0 10px 0 0; width: 88px; margin-left: 85px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
                @change="handleChange"
              />
            </template>
            <!-- 内容整体一行 -->
            <div class="content-row">
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 40px;
                "
                >整体措施不得当:</span
              >
              <el-input-number
                v-model="num8"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <span
                style="
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 14px;
                  margin-top: 5px;
                  margin-left: 60px;
                "
                >超过阈值:</span
              >
              <el-input-number
                v-model="num8"
                style="margin-left: 5px; width: 88px; height: 32px;margin-top:25px"
                controls-position="right"
                :min="1"
                :max="60"
                size="small"
              />
              <el-button type="text" style="margin-left: 16px;margin-top:8px">增加</el-button>
            </div>
          </el-collapse-item>
        </el-collapse>
     
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$router.go(-1)">取 消</el-button>
      <el-button @click="$router.go(-1)">模拟 仿真</el-button>
      <el-button type="primary" @click="$router.go(-1)">保 存</el-button>
    </div>
  </div>
</template>
<script>
import HkTable from "@/components/HKTable";

export default {
  components: { HkTable },
  data() {
    return {
      activeNames: ["1", "2", "3", "4", "5"],
      activeNames1: true,

      num: 40,
      num1: 2,
      num2: 1,
      num3: 2,
      num4: 2,
      num5: 3,
      num6: 40,
      num7: 8,
      num8: 4,
      num9: 6,
      num10: 4,
      num11: 3,
      num12: 2,
      num13: 20,
      num14: 15,
      num15: 30,
      num16: 20,
      num17: 15,

      value: "",
    };
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
  },
};
</script>

<style scoped lang="scss">
.dialog-footer {
  margin-top: 20px;
  margin-bottom: 0px;
  display: flex;
  justify-content: flex-end;
  background-color: #ffffff;
  padding: 14px 20px;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 64px;
  z-index: 9;
}
.back {
  margin-bottom: 20px;
}
.content-box {
  background-color: #ffffff;
  //   height: 1000px;
  padding-left: 100px;
  padding-top: 50px;
  padding-bottom: 50px;
  padding: 20px;
  .box-title {
    display: flex;
    width: 100%;
    height: 136px;
    background: #eef1ff;
    padding: 16px;
    border: 1px solid rgba(75, 110, 239, 1);
  }
  .box-content {
    width: 100%;
    height: 400px;
    background: rgba(0, 0, 0, 0.02);
    padding: 20px;
  }
}
.content-row {
  display: flex;
  margin-top: 10px;
  height: 73px;
  line-height: 73px;
  background: rgba(0, 0, 0, 0.02);
  border-top: 1px solid #eee;
  border-bottom: none;

}
::v-deep .el-input--medium .el-input__icon {
  display: none;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 20px;
}
::v-deep .el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
::v-deep .el-collapse-item__header {
  opacity: 0.85;
  font-family: PingFangSC-Semibold;
  font-size: 16px;
  color: #000000;
  line-height: 22px;
  font-weight: 600;
}
::v-deep .el-collapse-item__header i {
  //  position: relative;
  //  left: 10px;
  // top: 50%;
  // transform: translateY(-50%);
}
::v-deep [data-v-7b866964] .el-collapse-item__header {
   height: 60px;
}
.el-collapse-item__header::after {
  display: none;
}
::v-deep .el-collapse-item__arrow {
  display: none;
}
.is-active {
  .el-icon-arrow-right {
    transform: rotate(90deg);
  }
}
</style>
